<template>
  <div class="doctor">
    <el-card class="box-card">
      <div class="boxcard-head">
        <el-form :model="queryParam" ref="queryParam" inline class="demo-form-inline">
          <el-form-item label="医生名称" prop="name">
            <el-input v-model="queryParam.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="queryParam.phoneNumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item style="flex: 1;" label="医院" prop="hospitalId">
            <el-select v-model="queryParam.hospitalId" filterable placeholder="请选择">
              <el-option
                v-for="item in hospitalList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="look_btn" type="primary" @click="getList()">查询</el-button>
            <el-button @click="resetForm('queryParam')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="boxcard-body">
        <el-table
          :data="list"
          style="width: 100%;"
          row-key="id"
          :header-cell-style="{ 'background-color': '#EEEEEE' }"
        >
          <el-table-column type="index" label="排名" width="60"></el-table-column>
          <el-table-column prop="totalReplyFee" label="累计咨询费" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="totalOrder" label="累计咨询订单" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="imageUrl" label="头像" width="100">
            <template slot-scope="scope">
              <img :src="scope.row.imageUrl" width="60" height="60" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="phoneNumber" label="手机" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="hospitalName" label="医院名称" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="postName" label="职务" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="departmentName" label="科室" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="状态" width="150" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.status === 1 ? '正常合作' : '终止合作' }}</template>
          </el-table-column>
          <el-table-column prop="isHot" label="是否首页" width="150" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.isHot ? '是' : '否' }}</template>
          </el-table-column>
          <el-table-column prop="recommendNum" label="总宣传数" width="60" show-overflow-tooltip></el-table-column>
          <el-table-column
            prop="totalDistributeFee"
            label="累计分销费"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="amount" label="余额" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="commentTimes" label="咨询评价次数" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="goodRate" label="咨询评价好评率" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="pageChange"
            :total="total"
            :current-page.sync="pageNum"
            :page-sizes="[10, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  components: { },
  data() {
    return {
      queryParam: {
        name: null,
        phoneNumber: null,
        hospitalId: null
      },
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表
      // 数据字典
      hospitalList: [],
      hospitalDepartments: [],
      hospitalPosts: [],
      skillSubjects: [],
      id: null,
    };
  },
  created() {
    this.ininDict();
    this.getList(this.pageNum, this.pageSize);
  },
  watch: {
  },
  methods: {
    ininDict() {
      this.$https.get("doctor/hospitalSelectOption").then(res => {
        this.hospitalList = res.data.data;
      });
      this.$https.get("dict/hospitalDepartment").then(res => {
        this.hospitalDepartments = res.data.data;
      });
      this.$https.get("dict/hospitalTitle").then(res => {
        this.hospitalPosts = res.data.data;
      });
      this.$https.get("dict/consultSubject").then(res => {
        this.skillSubjects = res.data.data;
      });
    },
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      this.$https
        .get("/doctor/pageDoctorOrderSort", {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name:this.queryParam.name,
          hospitalId:this.queryParam.hospitalId,
          phoneNumber:this.queryParam.phoneNumber
        })
        .then(res => {
          this.list = res.data.data.list;
          this.total = Number.parseInt(res.data.data.total);
          this.pageNum = res.data.data.pageNum;
        });
    },
    resetForm(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields();
        if (formName == "queryParam") {
          this.getList();
        }
      }
    },
  }
};
</script>

<style lang="less"></style>
